<!-- List 展示页面 -->
<template>
  <div
    class="myhover w-full h-80 rounded-lg overflow-hidden grid grid-cols-3 bg-gray-50 bg-opacity-40 mt-3 first:mt-0"
    v-for="(num, index) in 2" :key="index">
    <img src="../../assets/images/02.jpg" class="col-span-1 h-full" alt="">
    <div class="my-scroll-style p-3 col-span-2 overflow-y-auto">{{ text }} {{ text }} {{ text }}</div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
const text = ref(`
  宽度设置：w-4  w-1/2   最小宽：min-w-0   最大宽：max-w-0   w-screen(=100vw)
  高度设置：h-4  h-1/2    最小高：min-h-0    最大高：max-h-0   h-screen(=100vh)
  行高：leading-8
  文本对齐：text-left  text-center  text-right  text-justify
  字体颜色：font-white     字体大小：text-lg     加粗：font-bold
  边框：border-4  border-blue-500
  圆角：rounded-lg    rounded-full：用于设置药丸型高宽比为1:2即可、正圆形：高宽相等
  外边距：m-4  mx-4  my-4  ml/mt/mr/mb-4   负值：-m-4
  内边距：p-4   px-4  py-4  pl/pt/pr/pb-4   负值：-p-4`
)

</script>

<style scoped>

</style>